import React, { Component } from 'react';

class TwoRef extends Component {

    //创建获取 输入框数据的方法
    getValue = ()=>{
        // console.dir(this);
        //获取数据
        let value = this.input.value;
        //展示数据
        this.box.innerHTML = value;
        //清空
        this.input.value = "";
    }

    render() {
        return (
            <>
                <h1>回调函数形式的ref</h1>
                <p>当react执行这段代码时，会将真实dom对象作为参数，去执行这个函数</p>
                <input ref={(el)=>{this.input = el}}  type="text" />
                <button onClick={this.getValue}>获取数据并展示</button>
                <div ref={el => this.box = el } style={{width:300,height:300,border:"1px solid red"}}></div>
            </>
        );
    }
}

export default TwoRef;